<template>
  <div id="logisticsinfo">
    <div class="lodi-top">
      <div class="lodi-icoin">
        <img src="../../assets/images/logistics.png">
      </div>
      <div class="lodi-txt">
        <p class="txt1"><span>物流状态:</span>&nbsp<span>{{logiInfo.state}}</span></p>
        <p class="txt2"><span>物流公司:</span>&nbsp<span>{{logiInfo.com}}</span></p>
        <p class="txt3"><span>物流单号:</span>&nbsp<span>{{logiInfo.nu}}</span></p>
      </div>
    </div>
    <div class="lodi-list">
      <timeline>
        <timeline-item v-for="(item, index) in logiInfo.data" :key="index" :class="[index === 0 ? 'item-first' : '']">
          <p :class="[index >= 0 ? 'recentMsg' : '']">{{item.context}}<!-- <a href="tel:15055085433">15055085433</a> --></p>
          <p :class="[index >= 0 ? 'recentTime' : '']">{{item.time}}</p>
        </timeline-item>
      </timeline>
    </div>
  </div>
</template>
<script>
  import { Timeline, TimelineItem } from 'vux'
  export default {
    components: {
      Timeline,
      TimelineItem
    },
    data () {
      return {
        logiInfo: {}
      }
    },
    mounted () {
      this.showaxios()
    },
    methods: {
      showaxios () {
        this.$axios.post(this.apidomain + '/api/integralMall/logisticsTrack/' + this.getCookie('appid'), {
          type: this.$route.query.type,
          postid: this.$route.query.postid
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.logiInfo = response.data.data
            switch (this.logiInfo.state) {
              case '0':
                this.logiInfo.state = '单号不存在或者已经过期'
                break
              case '1':
                this.logiInfo.state = '揽件，货物已由快递公司揽收并且产生了第一条跟踪信息'
                break
              case '2':
                this.logiInfo.state = '疑难，货物寄送过程出了问题'
                break
              case '3':
                this.logiInfo.state = '签收，收件人已签收'
                break
              case '4':
                this.logiInfo.state = '退签，即货物由于用户拒签、超区等原因退回，而且发件人已经签收'
                break
              case '5':
                this.logiInfo.state = '派件，即快递正在进行同城派件'
                break
              case '6':
                this.logiInfo.state = '退回，货物正处于退回发件人的途中'
                break
            }
            console.log(this.logiInfo)
            // this.data1 = response.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/logisticsinfo/logisticsinfo.less";
</style>
